<style scoped>
  .rank-title-wrap {
    padding: 2vw 0;
    text-align: center;
  }

  .rank-title {
    margin-left: 4vw;
    font-weight: bold;
    font-size: 5vw;
  }

  .player-wrap {
    display: flex;
    justify-content: space-around;
    margin-top: 2vw;
  }

  .player-item {
    overflow: hidden;
    width: 17vw;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .item-player-img {
    position: absolute;
    left: 0;
    width: 11vw;
    height: 11vw;
    border-radius: 50%;
    border-width: 0.5vw;
    border-style: solid;
    margin-left: 2.9vw;
    box-sizing: border-box;
  }

  .item-img-wrap {
    position: relative;
  }

  i.bg-player {
    font-size: 13vw;
  }

  .item-player-name {
    font-size: 4vw;
    font-weight: bold;
    margin-top: 1vw;
    text-align: center;
  }

  .vote-info-wrap {
    font-size: 4vw;
    display: flex;
    border-radius: 2vw;
    margin: 6vw 2vw;
    background: #e8e2e2;
    justify-content: space-around;
  }

  .vote-info-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2vw 1vw;
  }

  span.vote-info-item-title {
    font-size: 3.5vw;
  }

  .vote-info-item-content {
    margin-top: 1vh;
  }

  .player-info-wrap {
    margin-top: 7vw;
  }

  .player-base-info-wrap {
    margin: 2vw 5vw;
    border-width: 0.5vw;
    border-style: solid;
    border-radius: 2vw;
    display: flex;
    flex-direction: column;
  }

  .player-base-info-title {
    text-align: center;
    background: transparent;
    margin-top: -5vw;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  span.player-base-info-title-content {
    background: white;
    font-size: 4.5vw;
    font-weight: bold;
  }

  .player-base-info-item {
    padding: 1vw;
    font-weight: bold;
    font-size: 3.5vw;
    display: flex;
  }

  .player-base-info-item-title {
    width: 17vw;
  }

  .player-base-info-item-content {
    color: #646464;
    margin-left: 1vw;
    width: 68vw;
    word-break: break-all;
  }

  .player-img-title {
    margin: 4vh 24vw;
    text-align: center;
    border-radius: 2vw;
    padding: 2vw;
    font-size: 5vw;
    font-weight: bold;
  }

  .player-img-item {
    padding: 0 2vw;
  }

  .player-img-item img {
    width: 96vw;
  }

  .bottom-wrap {
    border-top: #e4e3e3 1px solid;
    display: flex;
    justify-content: space-around;
    padding: 2vw 1vw;
    position: fixed;
    width: 100vw;
    bottom: 0;
  }

  .bottom-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 4vw;
    padding: 2vw 2vw;
    border-radius: 1vw;
  }

  .bottom-item-gift {
    margin-top: -12vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    font-size: 4vw;
  }

  .bottom-item-gift img {
    width: 15vw;
  }

  .iconfont {
    font-size: 4vw;
    margin-right: 1vw;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .share-banner {
    width: 80vw;
    background-color: #fff;
  }

  span.build-banner {
    position: fixed;
    right: 2vw;
    top: 10vh;
    font-size: 0.4rem;
    color: white;
    background: rgba(0, 0, 0, 0.55);
    padding: 1vw;
    border-radius: 1vw;
  }

  .share-banner-img {
    width: 100%;
  }

  .entry-ts {
    padding: 0.3vw;
    z-index: 100;
    position: absolute;
    left: 3vw;
    top: 14vh;
    font-size: 3vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.63);
    height: 7vw;
    width: 7vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .my-gift-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .gift-info, .user-info {
    display: flex;
    align-items: center;
  }

  .gift-info-img {
    width: 10vw;
    margin: 2vw;
  }

  .user-head-img {
    width: 10vw;
    border-radius: 50%;
    margin: 2vw;
  }

  .user-info {
    color: gray;
    /*flex-direction: column;*/
    justify-content: center;
  }
  .banner-img{
    width: 100vw;
    height: 57.8vw;
  }
</style>
<template>
  <div style="padding-bottom: 8vh;height: 92vh;overflow-y: scroll"
       :style="{color: (mainData.page.font_color+'!important'),background:mainData.page.background_color}"
       v-if="mainData!=null">

    <span v-wechat-title="mainData.title" @click="toTs" class="entry-ts">投诉</span>
    <MyAudio v-if="mainData!=null&&mainData.page.background_music!=null&&mainData.page.background_music.length>0"
             :showCtrl="true" :url="GLOBAL.getUrl(mainData.page.background_music[0])"></MyAudio>
    <!--		<div :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}"-->
    <!--		     class="page-title">{{mainData.title}}-->
    <!--		</div>-->
    <van-notice-bar v-if="!isNull(mainData.page.notice)" color="#FF5151" background="#FFD8D8" :text="mainData.page.notice"
                    left-icon="http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/icon_notice.png"/>
    <van-swipe v-if="data!=null" class="banner-swipe" :loop="(data.video!=null&&data.video.length>0)?false:true"
               indicator-color="white">

      <van-swipe-item v-if="data.video!=null&&data.video.length>0">
        <video controls="controls" class="banner-img" x5-video-player-type="h5" preload="metadata" playsinline="true"
               webkit-playsinline="true" x-webkit-airplay="true" x5-video-orientation="portraint"
               x5-video-player-fullscreen="true" :src="GLOBAL.getUrl(data.video[0])" :poster="GLOBAL.getUrl(data.imgs[0])"/>
      </van-swipe-item>
      <van-swipe-item v-for="item in mainData.content.banners" :key="item.img">
        <img class="banner-img" :src="GLOBAL.getUrl(item.img)"/>
      </van-swipe-item>
    </van-swipe>
    <div class="rank-title-wrap"
         v-if="mainData!=null&&GLOBAL.pageConst.PAGE_SHOW_GIFT_LIST_ON_TOP_YES===mainData.page.show_top_list">
      <i class="iconfont icon-huangguan" :style="{color:mainData.page.btn_color}" style="font-size: 7vw;"></i>
      <span class="rank-title" :style="{color:mainData.page.btn_color}">网络人气榜</span>
    </div>
    <div class="player-wrap"
         v-if="mainData!=null&&GLOBAL.pageConst.PAGE_SHOW_GIFT_LIST_ON_TOP_YES===mainData.page.show_top_list&&data!=null">
      <div class="player-item" @click="toPlayer(item.id)" v-for="item in data.rankTopList"
           :style="{color:mainData.page.btn_color}">
        <div class="item-img-wrap">
          <img class="item-player-img" :src="GLOBAL.getUrl(item.imgs[0],true)"
               style="border-color:#c0de22">
          <i class="bg-player iconfont icon-ganlanzhi" style="color: #c0de22"></i>
        </div>
        <div class="item-player-name" style="color: #333">{{item.player_name}}</div>
      </div>
    </div>
    <div class="vote-info-wrap" v-if="data!=null"
         :style="{color:mainData.page.btn_font_color,background:mainData.page.btn_color}">
      <div class="vote-info-item">
        <span class="vote-info-item-title">距离第一名</span>
        <span class="vote-info-item-content">{{data.rangeTopVoteNum}}票</span>
      </div>
      <div class="vote-info-item">
        <span class="vote-info-item-title">距离上一名</span>
        <span class="vote-info-item-content">{{data.rangePreVoteNum}}票</span>
      </div>
      <div class="vote-info-item">
        <span class="vote-info-item-title">当前票数</span>
        <span class="vote-info-item-content">{{data.total_vote_num}}票</span>
      </div>
      <div class="vote-info-item">
        <span class="vote-info-item-title">当前排名</span>
        <span class="vote-info-item-content">第{{data.myRank}}名</span>
      </div>
      <div class="vote-info-item">
        <span class="vote-info-item-title"> {{mainData.apply.player_label}}编号</span>
        <span class="vote-info-item-content">{{data.no}}号</span>
      </div>
    </div>
    <div class="player-info-wrap" v-if="data!=null">
      <div class="player-base-info-wrap" :style="{'border-color':mainData.page.btn_color}">
        <div class="player-base-info-title">
          <span class="player-base-info-title-content"
                :style="{color:mainData.page.btn_color,background:mainData.page.background_color}">
              {{mainData.apply.player_label}}信息
            </span>
        </div>
        <div class="player-base-info-item">
          <div class="player-base-info-item-title">
            {{mainData.apply.player_name}}:
          </div>
          <div class="player-base-info-item-content">
            {{data.player_name}}
          </div>
        </div>
        <div class="player-base-info-item">
          <div class="player-base-info-item-title">
            {{mainData.apply.desc}}:
          </div>
          <div class="player-base-info-item-content">
            {{data.desc}}
          </div>
        </div>
        <div class="player-base-info-item">
          <div class="player-base-info-item-title">
            {{mainData.apply.slogan}}:
          </div>
          <div class="player-base-info-item-content">
            {{data.slogan}}
          </div>
        </div>
        <template v-if="data.other_fields!=null&&data.other_field_show===GLOBAL.applyConst.APPLY_SHOW_OTHER_FIELD_YES">
          <div class="player-base-info-item" v-for="item in data.other_fields">
            <div class="player-base-info-item-title">
              {{item.name}}
            </div>
            <div class="player-base-info-item-content">
              {{item.value}}
            </div>
          </div>
        </template>

      </div>
      <div class="player-img-title"
           :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">参赛选手照片
      </div>
      <div v-if="data!=null" class="player-img-item" v-for="item in data.imgs">
        <img :src="GLOBAL.getUrl(item)">
      </div>
      <div class="richtext" v-html="data.content"></div>
      <div class="my-gift-list"
           v-if="mainData!=null&&GLOBAL.pageConst.PAGE_SHOW_GIFT_LIST_ON_USER_HOME_YES===mainData.page.show_gift_list">
        <div class="player-img-title"
             :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">礼物列表
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getMyGiftList">
          <div class="my-gift-item" v-for="item in myGiftList">
            <span class="gift-info">
              <img class="gift-info-img" :src="GLOBAL.getUrl(item.gift_img)">
              <span class="gift-info-name">{{item.gift_name+'X'+item.gift_num}}</span>
            </span>
            <span class="user-info" v-if="GLOBAL.ruleConst.RULE_SEND_GIFT_ANONYMOUS_YES!==mainData.rule.gift_anonymous">
              <span class="user-head-nickname">{{item.nickname}}</span>
              <img class="user-head-img" :src="item.head_img">
            </span>
          </div>
        </van-list>
      </div>
    </div>
    <div class="bottom-wrap" :style="{background:mainData.page.background_color}">
      <div @click="toVote" class="bottom-item"
           :style="{color:mainData.page.btn_font_color,background:mainData.page.btn_color}">
        <i class="iconfont icon-zanpress"></i>
        投票
      </div>
      <div v-if="mainData.page.generate_poster===GLOBAL.pageConst.BANNER_DM_OPEN" @click="dm" class="bottom-item"
           :style="{color:mainData.page.btn_font_color,background:mainData.page.btn_color}">
        <i class="iconfont icon-fasongxiaoxi"></i>弹幕
      </div>

      <div v-if="mainData.model===GLOBAL.activeConst.MODEL_GIFT" @click="toGift" class="bottom-item-gift"
           :style="{color:mainData.page.btn_color}">
        <img :src="GLOBAL.getUrl('imgs/wap/icon_zs.png')">
        送上礼物
      </div>
      <div v-if="mainData.page.generate_poster===GLOBAL.pageConst.BANNER_DM_OPEN" @click="buildBanner"
           class="bottom-item" :style="{color:mainData.page.btn_font_color,background:mainData.page.btn_color}">
        <i class="iconfont icon-haibaojia"></i>
        海报
      </div>
      <div @click="toHome" class="bottom-item"
           :style="{color:mainData.page.btn_font_color,background:mainData.page.btn_color}">
        <i class="iconfont icon-tab_hoem_nor"></i>
        首页
      </div>
    </div>
    <van-overlay :show="showGzh" @click="showGzh = false">
      <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
        <img style="width: 60vw;" class="gzh-img" :src="GLOBAL.getUrl(mainData.gzh_img[0])">
      </div>
    </van-overlay>
    <van-overlay :show="show" @click="show = false">
      <div v-if="show" class="wrapper">
        <div class="share-banner" @click.stop>
          <img class="share-banner-img" :src="shareBanner">
        </div>
      </div>
    </van-overlay>
    <CanvasPoster v-if="create" :painting="painting" @success="buildSuccess" @fail="buildFail"></CanvasPoster>
    <van-overlay :show="showAd" @click="showAd = false">
      <div v-if="showAd" class="wrapper">
        <div class="share-banner" @click="canToGift">
          <img class="share-banner-img" :src="GLOBAL.getUrl(mainData.content.voted_ad_img[0])">
        </div>
      </div>
    </van-overlay>
    <GiftBuyLast v-if="showGiftAnim"></GiftBuyLast>
  </div>

</template>
<script>
  import CanvasPoster from '@/components/BannerBuilder/canvas-poster'
  import { getPlayerById, vote, getGiftList } from '@/api/play'
  import { getActive } from '@/api/active'
  import { getActiveId, getSharePath, isNull } from '@/libs/util'
  import MyAudio from '@/components/myaudio'
  import GiftBuyLast from '@/components/GiftBuyLast'

  export default {
    name: 'player',
    components: {
      CanvasPoster, MyAudio, GiftBuyLast
    },
    data () {
      return {
        id: null,
        pid: null,
        data: null,
        mainData: null,
        showGiftAnim: false,
        showAd: false,
        show: false,
        create: false,
        shareBanner: '',
        shareBannerBg: '',
        myGiftList: [],
        loading: false,
        finished: false,
        painting: {
          width: 550,
          height: 876,
          views: [
            {
              type: 'rect',
              top: 0,
              left: 0,
              background: '#f4f5f7',
              width: 550,
              height: 876
            },
            {
              type: 'text',
              content: '',
              left: 275,
              top: 10,
              width: 450,
              lineHeight: 33,
              fontSize: 30,
              textAlign: 'center',
              breakWord: true
              // radius: 40
            },
            {
              type: 'image',
              url: '',
              left: 75,
              top: 100,
              width: 400,
              height: 400,
              // radius: 50
            },
            {
              type: 'text',
              content: '',
              left: 275,
              top: 510,
              width: 450,
              lineHeight: 30,
              fontSize: 30,
              textAlign: 'center',
              breakWord: true
              // radius: 40
            },
            {
              type: 'text',
              content: '',
              left: 275,
              top: 560,
              width: 450,
              lineHeight: 30,
              fontSize: 30,
              textAlign: 'center',
              breakWord: true
              // radius: 40
            },
            // {
            //   type: 'image',
            //   url: '',
            //   left: 0,
            //   top: 0,
            //   width: 550,
            //   height: 600,
            //   // radius: 40
            // },
            {
              type: 'text',
              content: `长按或扫描二维码，并可保存`,
              fontSize: 18,
              color: '#999999',
              top: 849,
              left: 155
            }, {
              type: 'qrcode',
              content: '',
              background: '#fff',
              color: '#000',
              left: 175,
              top: 640,
              width: 200,
              height: 200
            },

          ]
        },
        showGzh: false,
        locationCity: null,
        locationDistrict: null
      }
    },
    created () {
      this.initData()
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route' (to, from) {
        // 重置数据
        Object.assign(this.$data, this.$options.data())
        /** 初始化其他数据 */
        this.initData()
      }
    },

    methods: {
      isNull(str){
        return isNull(str);
      },
      toTs () {
        this.$router.push({ name: 'report' })
      },
      buildBanner () {
        if (this.create) {
          this.show = true
        } else {
          this.create = true
        }
      },
      toPlayer (pid) {
        this.$router.push({ name: 'player', query: { pid: pid } })
      },
      buildSuccess (src) {
        this.shareBanner = src
        this.show = true
      },
      buildFail (e) {
      },
      initData () {
        this.id = getActiveId()
        this.pid = this.$route.query.pid
        try {
          let mainData = this.GLOBAL.getMainData()
          if (mainData == null || !mainData) {
            this.getData()
          } else {
            this.mainData = mainData
            this.setData()
            this.getDataById()
            this.initMap()
            // this.getMyGiftList()
            this.showGiftAnim = true
          }
        } catch (e) {
          this.getData()
        }
      },
      setData () {
        let vm  =this;
        if(this.mainData.active_status ===this.GLOBAL.activeConst.STATUS_END){
          vant.Toast.fail('活动已结束');
          setTimeout(()=>{
            vm.$router.push({name:'result'});
          },2000)
          return;
        }
        //显示今日之星
        if (this.mainData.content.everyday_start == this.GLOBAL.contentConst.CONTENT_EVERYDAY_STAR_OPEN) {
          if (!isNull(this.mainData.content.voice_player_img)) {
            this.mainData.content.banners.splice(1, 0, { img: this.mainData.content.voice_player_img })
          }
        }
      },
      toGift () {
        this.$router.push({ name: 'gift', query: { pid: this.pid } })
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          vm.mainData = rep.data.data
          vm.GLOBAL.setMainData(vm.mainData)
          if(isNull(document.title)){
            window.location.reload();
            return;
          }
          vm.getDataById()
          vm.initMap()
          vm.setData();
          // vm.getMyGiftList()
          vm.showGiftAnim = true
        })
      },
      getDataById () {
        let vm = this
        getPlayerById(this.pid, 1).then(rep => {
          vm.data = rep.data.data
          vm.initShare()
        })
      },
      getMyGiftList () {
        if (this.finished) {
          return
        }
        let vm = this;
        let page = this.myGiftList.length / 20 + 1
        getGiftList(vm.id, vm.pid, page, 20).then(rep => {
          vm.myGiftList.push(...rep.data.data.list)
          if (vm.myGiftList.length >= rep.data.data.count) {
            vm.finished = true
          }
          vm.loading = false;
        },error => {
          vm.loading = false;
        })
      },
      initShare () {
        let vm = this
        vm.painting.views[1].content = vm.mainData.title;
        vm.painting.views[3].content = '快来给我加油助威吧!';
        vm.painting.views[4].content = vm.data.player_name;
        vm.painting.views[6].content = window.location.protocol + '//' + window.location.host + vm.$route.fullPath + '&id=' + vm.id;
        vm.painting.views[2].url = vm.GLOBAL.getUrl(vm.data.imgs[0]);
        // this.$wx.wxJssdkInit()
        let shareObj = {
          title: this.mainData.title,
          link: getSharePath('player', this.pid,'',vm.mainData),
          imgUrl: this.GLOBAL.getUrl(this.mainData.share_img !== null && this.mainData.share_img.length > 0 ? this.mainData.share_img[0] : this.data.imgs[0], true),
          desc: this.getShareDesc()
        }
        this.$wx.wxShare(shareObj)
      },
      getShareDesc () {
        let defaultDesc = '我是[name]，编号[ID]，我正在参加[activity_title]请为我加油吧！'
        if (!isNull(this.mainData.share_player_desc)) {
          defaultDesc = this.mainData.share_player_desc
        }
        return defaultDesc.replace('[name]', this.data.player_name).replace('[ID]', this.data.no).replace('[activity_title]', this.mainData.title)
      },
      initMap () {
        if(isNull(this.mainData.rule.map_key)){
          return;
        }
        let vm = this
        // 初始化地图组件
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'https://apis.map.qq.com/tools/geolocation/min?key=' + this.mainData.rule.map_key + '&referer=toupiao'
        document.getElementsByTagName('head')[0].appendChild(script)
        if (script.addEventListener) {
          script.addEventListener('load', function () {
            vm.createLocation()
          }, false)
        }
      },
      createLocation () {
        let vm = this
        let geolocation = new qq.maps.Geolocation()
        geolocation.getIpLocation(position => {
          //定位成功
          vm.locationCity = position.city
          vm.locationDistrict = position.district
        }, error => {
          //定位失败
        })
      },
      dm () {
        this.$router.push({ name: 'comment', query: { pid: this.pid } })
      },
      toHome () {
        this.$router.push({ name: 'home' })
      },
      toVote () {
        //活动是否开启
        let voteStartTime = new Date(this.mainData.vote_start_time)
        let now = new Date()
        if (voteStartTime.getTime() > now.getTime()) {
          vant.Toast.fail('投票还未开启')
          return
        }
        // 是否关注
        if ((this.mainData.rule.need_subscribe === this.GLOBAL.ruleConst.RULE_SUBSCRIBE_NEED_BEFORE_VOTE || this.mainData.rule.need_subscribe === this.GLOBAL.ruleConst.RULE_SUBSCRIBE_NEED_BEFORE_VOTE_AND_APPLY)
          && this.mainData.wxInfo.subscribe == 0) {
          vant.Toast.fail('请先关注公众号')
          this.showGzh = true
          return
        }
        //验证码
        if (this.mainData.rule.verification !== 0) {

        }
        // 地区校验
        if (!isNull(this.mainData.rule.region_limit)) {
          // locationCity
          if (this.locationCity != null) {
            let hasCity = this.locationCity.indexOf(this.mainData.rule.region_limit)
            if (hasCity >= 0) {
              vant.Toast.fail('当前区域不允许投票')
              return
            }
          }
          if (this.locationDistrict != null) {
            let hasDistrict = this.locationDistrict.indexOf(this.mainData.rule.region_limit)
            if (hasDistrict >= 0) {
              vant.Toast.fail('当前区域不允许投票')
              return
            }
          }

        }
        vote(this.pid, this.id).then(rep => {
          //等于1的情况下，是说明开启了达量送礼功能，就是达到一定票数后只能送礼加票
          if(rep.data.data===1){
            //免费票数用完了，要送礼投票
            let vm = this;
            vant.Toast({message:rep.data.msg,
              onClose:()=>{
                vm.toGift();
              }
            });
          }else {
            vant.Toast('投票成功')
            // to_gift_page_after_click_ad
            //投票成功后是否显示图片
            if (this.mainData.content.voted_ad_img != null && this.mainData.content.voted_ad_img.length > 0) {
              this.showAd = true
            }
          }
        })
      },
      canToGift () {
        if (this.mainData.content.to_gift_page_after_click_ad === this.GLOBAL.contentConst.CONTENT_JUMP_TO_GIFT_PAGE_AFTER_CLICK_AD_YES) {
          this.toGift()
        }
      }
    }
  }
</script>
